<template>
  <div class="page" :loading="loading">
    <div class="order-detail app-container">
      <div class="top">
        <h3>工单编号：{{ data?.workOrderSn }}</h3>
        <div class="line">
          <el-descriptions class="device-info" :column="2" title="设备基本信息">
            <el-descriptions-item label="设备编号:">{{ data?.machineId }}</el-descriptions-item>
            <el-descriptions-item label="微波开始加热时间:">
              {{ parseTime(data?.heatBeginTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="设备名称:">
              {{ data?.machineName }}
            </el-descriptions-item>
            <el-descriptions-item label="城市标签:">
              {{ cityNameOptions.find((i) => i === data?.cityName) }}
            </el-descriptions-item>
            <el-descriptions-item label="微波结束加热时间:">
              {{ parseTime(data?.heatEndTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="设备货道:">
              货道{{ data?.machineRoadNo }}
            </el-descriptions-item>
            <el-descriptions-item label="暂存柜存入时间:">
              {{ parseTime(data?.inLockerTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="点位名称:">{{ data?.positionName }}</el-descriptions-item>
            <el-descriptions-item label="暂存柜取出时间:">
              {{ parseTime(data?.outLockerTime) }}
            </el-descriptions-item>
            <el-descriptions-item label="设备地址:">
              {{ data?.positionAddr }}
            </el-descriptions-item>
            <el-descriptions-item label="出餐口关闭时间:">
              {{ parseTime(data?.exitCloseTime) }}
            </el-descriptions-item>
            <el-descriptions-item span="2" label="机器温度:">
              {{ data?.temperature }}°C
            </el-descriptions-item>
            <el-descriptions-item span="2" label="制作时长:">
              {{ data?.processTime }}s
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions class="user-info" :column="1" title="用户信息">
            <el-descriptions-item label="用户名称:">{{ data?.userName }}</el-descriptions-item>
            <el-descriptions-item label="联系方式:">{{ data?.userMobile }}</el-descriptions-item>
            <el-descriptions-item label="取餐时间:">
              {{ parseTime(data?.outLockerTime || data?.exitCloseTime) }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="order-stat flex-center" :class="payStatusObj.className">
        <div>{{ payStatusObj?.label }}</div>
      </div>
    </div>

    <div class="goods-info app-container">
      <el-descriptions title="订单信息" :column="1" style="max-width: 500px">
        <el-descriptions-item label="订单编号:">{{ data?.orderSn }}</el-descriptions-item>
        <el-descriptions-item label="下单时间:">{{ data?.orderTime }}</el-descriptions-item>
        <el-descriptions-item label="订单类型:">
          <dict-tag class="inline-block" :options="order_origin" :value="data?.orderType" />
        </el-descriptions-item>
        <el-descriptions-item label="支付方式:">
          <dict-tag class="inline-block" :options="order_paytype" :value="data?.payType" />
        </el-descriptions-item>
        <el-descriptions-item label="订单备注:">{{ data?.remark || '无' }}</el-descriptions-item>
        <el-descriptions-item label="订单状态:">
          <dict-tag class="inline-block" :options="order_status" :value="data?.payStatus" />
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="餐品信息" :column="1">
        <el-descriptions-item label="餐品名称:">{{ data?.comboName }}</el-descriptions-item>
        <el-descriptions-item label="餐品类别:">{{ data?.typeName }}</el-descriptions-item>
        <el-descriptions-item label="餐品标签:">
          {{ data?.comboTag ?? data?.tagName }}
        </el-descriptions-item>
        <el-descriptions-item label="餐品主图:">
          <el-image
            style="width: 120px; height: 120px"
            :src="data?.tablewareUrl"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-teleported="true"
            :preview-src-list="[data?.tablewareUrl]"
            fit="contain"
          />
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="flex-center app-container">
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </div>
</template>

<script setup name="ProcessDetail">
import { getWorkDetail } from '@/api/order/processTrace'
import useGlobalStore from '@/store/modules/global'

const globalStore = useGlobalStore()
const cityNameOptions = computed(() => globalStore.myCityList)
const route = useRoute()
const { proxy } = getCurrentInstance()
const { order_origin, order_status, order_paytype, order_oper_status } = proxy.useDict(
  'order_origin',
  'order_status',
  'order_paytype',
  'order_oper_status'
)

const loading = ref(false)
const data = ref({})

async function getOrderDetail(id) {
  loading.value = true

  try {
    const r = await getWorkDetail(id)
    const { workOrder = {}, orderDetails = {} } = r?.data || {}
    data.value = { ...workOrder, ...orderDetails }
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  if (route.query.id) getOrderDetail(route.query.id)
})

const classNames = ['info', 'primary', 'success', 'danger']
const payStatusObj = computed(() => {
  let obj = {}
  if (order_oper_status.value?.length && data.value?.workerOrderStatus) {
    order_oper_status.value?.map(({ value, label }) => {
      if (value == data.value.workerOrderStatus)
        obj = { className: classNames[value - 1] ?? '', label }
    })
  }
  return obj
})
function handleClose() {
  proxy.$tab.closeOpenPage({ path: '/order/processTrace' })
}
</script>

<style lang="scss" scoped>
.page {
  background-color: var(--el-bg-color-page);
}
.app-container {
  background-color: #fff;
}
.order-detail {
  min-width: 900px;
  display: flex;
  justify-content: space-between;
  .top {
    width: 850px;
  }
  .line {
    display: flex;
    .device-info {
      width: 600px;
    }
  }
  .order-stat {
    width: 4em;
    > div {
      width: 1.1em;
      line-height: 2;
      font-weight: bold;
      font-size: 24px;
      color: #fff;
    }
  }
}

.goods-info {
  margin: 30px 0;
  display: flex;
  .el-descriptions {
    margin-right: 100px;
  }
}

:deep(.el-descriptions__title) {
  border-left: 3px solid var(--el-text-color-primary);
  text-indent: 5px;
}

.primary {
  background-color: var(--el-color-primary);
}
.warning {
  background-color: var(--el-color-warning);
}
.danger {
  background-color: var(--el-color-danger);
}
.success {
  background-color: var(--el-color-success);
}
.info {
  background-color: var(--el-color-info);
}
</style>
